import React, { useState, useEffect } from 'react'
import { map } from 'lodash'
import { inject, observer } from 'mobx-react'

import ScreenBg from './components/screens-bg'
import Row from '../common/row'
import Column from '../common/column'
import Screen from './components/screen'
import Screens from './screens'
import getStyle from './screen-style'
import { focusScreen, initScreenArr, setPlayingScreens, setVideoDom, setOneScreenDom, exitOneScreen } from '../../util'
import video from '../../store/video'
import useSubs from '../../hooks/useSubs'

const DiffScreens = () => {
  const { screenArr, mode, curScreenId, lastMode } = video

  const [screenDom, setScreenDom] = useState(null)

  useEffect(() => {
    selectScreens()
    if (mode === 1) {
      setOneScreenDom(curScreenId)
    }
    if (mode !== 1 && lastMode === 1) {
      exitOneScreen()
    }
  }, [mode])

  useEffect(() => {
    initScreenArr(mode)
  }, [screenDom])

  useEffect(() => {
    if (screenArr.length > 0 && mode !== 1) {
      focusScreen(screenArr[0].id)
      setDivIsPlaying()
    }
  }, [screenArr])

  useSubs(({ action, val }) => {
    if (action === 'stopVideo' || action === 'playVideo') {
      setPlayingScreens([action], [val])
    }
  })

  // 例子：当前9分屏，分屏8正在播放视频，切换4分屏，再切回9分屏，把记录在playingDiv的分屏8恢复播放
  function setDivIsPlaying() {
    const { playingScreens } = video
    for (const item of playingScreens) {
      const { id, player, status } = item
      if (setVideoDom(id)) {
        video.setScreenByParams(id, ['player', 'status'], [player, status])
        if (status === 'pause') {
          player.video.play()
        }
      }
    }
  }

  function selectScreens() {
    let dom = null
    const style = getStyle(mode)
    if (mode === 5) {
      dom = (
        <ScreenBg>
          <Row style={style.row}>
            <Screen id="screen0" customStyle={style.screen0} />
          </Row>
          <Row style={style.down}>
            {map([1, 2, 3, 4], (k) => {
              return <Screen id={`screen${k}`} key={k} customStyle={style.downItem} />
            })}
          </Row>
        </ScreenBg>
      )
    } else if (mode === 6) {
      dom = (
        <ScreenBg>
          <Row style={style.row}>
            <Screen id="screen0" customStyle={style.screen0} />
            <Column style={style.left}>
              <Screen id="screen1" customStyle={style.leftItem} />
              <Screen id="screen2" customStyle={style.leftItem} />
            </Column>
          </Row>
          <Row style={style.down}>
            {map([3, 4, 5], (k) => {
              return <Screen id={`screen${k}`} key={k} customStyle={style.downItem} />
            })}
          </Row>
        </ScreenBg>
      )
    } else if (mode === 7) {
      dom = (
        <ScreenBg>
          <Row style={style.row}>
            <Row style={style.up}>
              {map([0, 1], (k) => {
                return <Screen id={`screen${k}`} key={k} customStyle={style.upItem} />
              })}
            </Row>
          </Row>
          <Row style={style.down}>
            {map([2, 3, 4, 5, 6], (k) => {
              return <Screen id={`screen${k}`} key={k} customStyle={style.downItem} />
            })}
          </Row>
        </ScreenBg>
      )
    } else {
      dom = <Screens mode={mode} />
    }
    setScreenDom(dom)
  }

  return <>{screenDom}</>
}

export default inject('store')(observer(DiffScreens))
